<template>
  <van-nav-bar
    title="购物车列表"
    left-text=""
    left-arrow
    @click-left="goBack"
  />
  <van-checkbox-group v-model="checked">
    <div class="cart" v-for="item in cartlist" :key="item.id">
      <van-checkbox :name="item.id"></van-checkbox>
      <van-swipe-cell>
        <van-card
          :price="item.total"
          :desc="'库存：' + item.product.stock"
          :title="item.product.name"
          :thumb="item.product.thumbs_text"
        >
          <template #tags>
            <div>单价： {{ item.price }}</div>
          </template>
          <template #num>
            <van-stepper v-model="item.nums" @change="editCart(item)" />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button"  @click="del(item.id)"/>
        </template>
      </van-swipe-cell>
    </div>
  </van-checkbox-group>
  <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="checkedAll" @click="CheckAllEvent">全选</van-checkbox>
  </van-submit-bar>
</template>
<script setup>
const router = useRouter();
const goBack = () => {
  router.push("/business/index");
};
const checked = ref([]);
const { cookies } = useCookies();
const LoginUser = reactive(cookies.get("LoginUser"));
const cartlist = ref([]);
const checkedAll = ref(false);
// 计算总价
const total = computed(() => {
    let sum = 0
    // 计算选中
    cartlist.value.forEach(item =>{
        if(checked.value.includes(item.id)){
            sum += parseFloat(item.total)
        }
    })

    // 判断是否全选 
    if(checked.value.length >= cartlist.value.length && checked.value.length > 0)
    {
        checkedAll.value = true
    } else {
        checkedAll.value = false
    }
  return parseFloat(sum) * 100;
});
// 全选事件
const CheckAllEvent = () =>{
    if(checkedAll.value)
    {
        checked.value =  cartlist.value.map((item) => item.id);
    } else {
        checked.value = []
    }
}
onBeforeMount(() => {
  getCartData();
});
// 获取购物车数据
const getCartData = async () => {
  let result = await Api.product.cartIndex({
    busid: LoginUser.id,
  });
  if (result.code == 1) {
    cartlist.value = result.data;
  }
};
// 删除购物车数据
const del = (id) => {
  showConfirmDialog({
    title: "删除",
    message: "确认是否删除购物车商品?",
  })
    .then(async () => {
      let result = await Api.product.cartDel({
        busid: LoginUser.id,
        cartid: id,
      });
      if (result.code == 1) {
        showSuccessToast(result.msg);
        getCartData();
      } else {
        showFailToast(result.msg);
      }
    })
    .catch(() => {});
};
// 提交购买商品
const onSubmit = async () => {
  if (checked.value.length <= 0) {
    showFailToast("请先选择要购买的商品");
    return false;
  }
  router.push({
    path: "/product/confirm",
    query: {
      cartids: checked.value.toString(),
    },
  });
}
// 购物车数量变更
const editCart = async (item) => {
  let result = await Api.product.cartEdit({
    busid: LoginUser.id,
    nums: item.nums,
    cartid: item.id,
  });
  if (result.code == 0) {
    showFailToast(result.msg);
  }
  getCartData();
};
</script>
<style>
.cart {
  width: 100%;
  display: flex;
}
.van-swipe-cell {
  width: 100%;
}
.delete-button {
  height: 100%;
}
</style>